<%- include header %>
<!-- 主题内容start -->
<form method="post" name="batch" action="/manager/batchUpdateActiveState" id="batch">
<table class="table table-bordered table-striped table-condensed table-hover">
    <tr>
        <th class="span3" colspan="7"><h4 style="text-align: center">当前活动参加列表(总人数：<%- count %>人|当前页：<%- page.num %>/<%- page.pageCount %>页)</h4></th>
    </tr>
    <tr>
        <td class="span3" colspan="7" style="text-align: right;margin-left: 100px">
            <input id="inverseid" type="checkbox" onclick="selectFunc('inverse',this);"><span class="btn btn-small">反选</span>
            <input id="allid" type="checkbox" onclick="selectFunc('all',this);"> <span class="btn btn-small">全选</span>
            <a class="btn btn-success  btn-small" onclick="batchUpdateState(1)">批量通过</a>
            <a class="btn btn-danger btn-small" onclick="batchUpdateState(2)">批量拒绝</a>
        </td>
    </tr>
    <tr>
        <th class="span1">选择</th>
        <th class="span3">账号</th>
        <th class="span2">昵称</th>
        <th class="span3">用户邮箱</th>
        <th class="span3">微信</th>
        <th class="span2">性别</th>
        <th class="span2">年龄</th>
        <th class="span2">状态</th>
        <th class="span2">操作</th>
    </tr>
    <% datas.forEach(function(data,index){ %>
    <tr>
        <td>
            <input type="checkbox" name="ids" value="<%- data._id %>">
        </td>
        <td>
            <%- data.user.username %>
        </td>
        <td>
            <%- data.user.nickname %>
        </td>
        <td>
            <%- data.user.email %>
        </td>
        <td>
            <%- data.user.wechat %>
        </td>
        <% if(data.user.gender==1){ %>
        <td>
            男
        </td>
        <% }else{ %>
        <td>
            女
        </td>
        <% } %>
        <td>
            <%- data.user.age %>
        </td>
        <% if(data.state==0){ %>
        <td>
            已申请
        </td>
        <% }else if(data.state==1){ %>
        <td>
            <span style="color: #46ff0d">已通过</span>
        </td>
        <% }else{ %>
        <td>
            <span style="color: #ff1c24">已拒绝</span>
        </td>
        <% } %>
        <td>
            <a class="btn btn-success  btn-small" onclick="updateState('<%- data._id %>',1)">通过</a>
            <a class="btn btn-danger btn-small" onclick="updateState('<%- data._id %>',2)">拒绝</a>
        </td>
    </tr>
    <% }) %>
</table>
</form>
<div class="span12">
    <div id="page1"></div>
</div>

<!-- 主题内容end -->
<%- include footer %>
<script>
    function batchUpdateState(state){
        var frm = document.batch;			//获得表单内容
        $("#batch").attr('action','/manager/batchUpdateActiveState?state='+state)
        var cs = document.getElementsByName("ids");	//获取按钮组
        var flag =true;
        for(var i=0;i<cs.length;i++){	//判断按钮组中是否有用户被选中
            if(cs[i].checked){

                flag =false;
                break;
            }
        }
        if(flag){
            alert("你至少选中一个！");
            return ;
        }
        frm.submit();			//提交该表单
    }

    function selectFunc(flag,obj){
        var cs = document.getElementsByName("ids");		//按钮组，数组
        if(flag=='all'){					//全选点击逻辑
            $("#inverseid")[0].checked=false;		//全选和反选只能一个选中的逻辑
            for(var i=0;i<cs.length;i++){
                if(obj.checked){			//全选按钮选中，将按钮组所有元素checked属性置为真
                    cs[i].checked=true;

                }else{
                    cs[i].checked=false;

                }
            }

        }else if(flag=='inverse'){				//反选点击逻辑
            $("#allid")[0].checked=false;
            for(var i=0;i<cs.length;i++){

                cs[i].checked=!cs[i].checked;

            }


        }

    }

    function updateState(id,state){
        var prompt=confirm("你确定更改活动参与状态吗？？");

        if(prompt){

            window.location.href="/manager/updateActiveApplyState?id="+id+"&state="+state;
        }
    }
    $(function(){
        //获得浏览器参数

        $.extend({
            getUrlVars: function(){
                var vars = [];
                var hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                console.log(hashes);
                for(var i = 0; i < hashes.length; i++){
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            },
            getUrlVar: function(name){
                return $.getUrlVars()[name];
            }
        });

        //封装浏览器参数
        var composeUrlParams=function(){
            var param='';
            $.each($.getUrlVars(), function(i, item) {
                if(item!='num'){
                    var val=$.getUrlVar(item);
                    if(val) param += "&" + item+"="+val;
                }
            });
            return param;
        }
        var options = {
            currentPage:<%- page.num %>,                //当前页，css样式同其他页不同
            totalPages:<%- page.pageCount %>,           //总页数
            numberOfPages:5,                            //导航最多显示页数
            pageUrl: function(type, page, current) {    //页面跳转
                if(page!=<%- page.num %>) {
                    return "/manager/applyUsers?num=" + page + composeUrlParams();
                }
            }
        }
        $('#page1').bootstrapPaginator(options);
    })
</script>
